<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="vue.js"></script>
    <script src="VueTest.js"></script>
    <style>
        .game{
            width: 200px;
            height: 80px;
            margin: 10px;
            background-color: beige;
        }

    </style>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <ul>
            <li v-for="game in games" :key="game.gameId">
                <div class="game" :id="'g_'+game.gameId" @click="_gameInfo($event)">
                    {{game.gameName}}
                </div>
            </li>
        </ul>
        
        <button @click="_getGameListByPage(1)">
            第一页
        </button>
        <button @click="_getGameListByPage(2)">
            第二页
        </button>
    </div>
    

<script>
    let vm = new Vue({
        el: "#app",
        data:{
            message: "哈哈哈",
            games:[]
        },
        created(){
            let this_= this;
            let page = 1;
            gameList(page).then(resp=>{
                console.log(resp);
                 let resultEntity = resp.data;
                 //console.log(gameListdata.data[0]);
                 this_.games = resultEntity.data;
                 console.log(this_.games);
            })
        },
        methods:{
            //按页获取游戏列表
            _getGameListByPage(pageData){
                let this_= this;
                console.log(pageData);
                gameList(pageData).then(resp=>{
                let resultEntity = resp.data;
                this_.games = resultEntity.data;
                console.log(this_.games);
            })
            },
            _gameInfo(event){
                //获取游戏 id并写入cookie
                console.log(event.target.id);
                let g_gameId = event.target.id
                let gameId = g_gameId.slice(2);
                console.log(gameId);
                Cookies.set("gameId",gameId);
                window.location.href = "./vueTest2.html"
            }
            
        }
    })
</script>

</body>
</html>